<template>
  <view class="wrap" style="position: relative">
    <view class="btd">
      <span class="first"></span>身高 <span class="second"></span>社区平均线
    </view>
    <view class="btd bt1">
      曲线使用世卫组织最新标准
      <text class="quit" @click="tz()">什么是成长曲线？</text>
    </view>
    <view class="qiun-charts" :style="{ width: idx + 50 + 'rpx' }">
      <canvas
        canvas-id="canvasLineA"
        id="canvasLineA"
        class="charts"
        :style="{ width: idx + 'rpx' }"
        @touchstart="touchLineA"
        @touchmove="moveLineA"
        @touchend="touchEndLineA"
      ></canvas>
      <view class="tips">月龄</view>
      <p class="tips t1">97%</p>
      <p class="tips t2">85%</p>
      <p class="tips t3">50%</p>
      <p class="tips t4">15%</p>
      <p class="tips t5">3%</p>
    </view>
  </view>
</template>

<script>
import uCharts from "@/js_sdk/u-charts/u-charts/u-charts.js";
var canvaLineA = null;
var _self;
export default {
  data() {
    return {
      bf: "",
      list: [
        {
          name: "记录列表",
        },
        {
          name: "曲线记录",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      windowHeight: 0,
      wList: [],
      idx: "", //存放月龄信息的的宽度值用于图表宽度
      charts: {
        cWidth: "",
        cHeight: "",
        pixelRatio: 1,
        dataee: {
          categories: [],
          series: [
            {
              name: "97th",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "85th",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "50th",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "15th",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "3th",
              data: [],
              color: "rgba(215, 215, 215, 1.0)",
              lineType: "dash",
              pointShape: "none",
            },
            {
              name: "社区平均线",
              data: [],
              color: "#ff557f",
              pointShape: "none",
            },
            {
              name: "身高",
              data: [],
              color: "#18c7e1",
              pointShape: "circle",
            },
          ],
        },
      },
    };
  },
  created() {
    _self = this;
    this.getRecord();
  },
  methods: {
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {},
    getRecord() {
      let self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/childrenInfo/childrenHeight", {}).then((res) => {
        uni.hideLoading();
        let idx = res.data.data.length * 40 * 2;
        this.charts.cHeight = uni.upx2px(1000);
        this.charts.cWidth = uni.upx2px(idx);
        this.idx = idx;
        if (res.data.code === 200) {
          let abc = [];
          let b = [];
          // self.wList = res.data.data||[];
          res.data.data.forEach((it) => {
            self.charts.dataee.categories.push(
              it.monthAge == 0 ? "出生" : it.monthAge
            );
            self.charts.dataee.series[0].data.push(it.ylbSx);
            self.charts.dataee.series[1].data.push(it.kjbSx);
            self.charts.dataee.series[2].data.push(it.bzx);
            self.charts.dataee.series[3].data.push(it.kjbXx);
            self.charts.dataee.series[4].data.push(it.ylbXx);
            //self.charts.dataee.series[5].data.push(it.deptAvg)
            // self.charts.dataee.series[6].data.push(it.height)
            abc.push(it.deptAvg);
            b.push(it.height);
            //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
            LineA.categories = this.charts.dataee.categories;
            LineA.series = this.charts.dataee.series;
            self.showLineA("canvasLineA", LineA);
          });
          let aaa = "[";
          abc.forEach(function (item) {
            if (item == 0) {
              aaa += ",";
            } else {
              aaa += item + ",";
            }
          });
          aaa = aaa.substr(0, aaa.length - 1) + "]";
          //console.log(aaa)
          self.charts.dataee.series[5].data = eval(aaa);

          let bbb = "[";
          b.forEach(function (item) {
            if (item == 0) {
              bbb += ",";
            } else {
              bbb += item + ",";
            }
          });
          bbb = bbb.substr(0, bbb.length - 1) + "]";
          self.charts.dataee.series[6].data = eval(bbb);
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/grow-graph2-add",
      });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line",
        connectNulls: true,
        fontSize: 11,
        legend: {
          show: false,
        },
        title: {
          name: "儿童成长曲线",
          color: "red",
        },
        dataPointShape: true,
        dataLabel: false,
        background: "#FFFFFF",
        pixelRatio: _self.charts.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: "grid",
          gridColor: "#f4f4f4",
          gridType: "dash",
          dashLength: 10,
          boundaryGap: "left",
          itemCount: 10,
        },
        yAxis: {
          data: [
            {
              title: "身高(CM)",
              min: 40,
              max: 120,
            },
          ],
          showTitle: true,
          gridType: "dash",
          gridColor: "#f4f4f4",
          axisLineColor: "#ffffff",
          dashLength: 8,
          splitNumber: 10,
        },
        width: _self.charts.cWidth * _self.charts.pixelRatio,
        height: _self.charts.cHeight * _self.charts.pixelRatio,
        extra: {
          line: {
            type: "straight",
            width: "1px",
          },
          length: {
            position: "top",
          },
          tooltip: {
            showBox: true, //是否显示半透明黑色的提示区域
            bgColor: "#000000", //主体背景颜色
            bgOpacity: 0.4, //背景颜色透明度
            gridType: "none", //辅助线类型（虚线）
            dashLength: 10, //虚线单段长度
            gridColor: "#000000", //辅助线颜色
            fontColor: "#FFFFFF", //主体文字颜色
            // horizentalLine:true,//是否显示横向辅助线
            // xAxisLabel:true,//是否显示X轴辅助标签
            // yAxisLabel:true,//是否显示Y轴辅助标签
            // labelBgColor:'#DFE8FF',//标签背景颜色
            // labelBgOpacity:0.95,//背景颜色透明度
            // labelFontColor:'#666666'//标签文字颜色
          },
        },
      });
    },
    tz() {
      uni.navigateTo({
        url: "/pages/main/pub/czqxinfo",
      });
    },
    // touchLineA(e) {
    // 	canvaLineA.showToolTip(e, {
    // 		format: function(item, category) {
    // 			if (category == '出生') {
    // 				return category + item.name + '：' + item.data
    // 			} else {
    // 				return category + '月龄' + item.name + '：' + item.data
    // 			}
    // 		}
    // 	});
    // }
    touchLineA(e) {
      canvaLineA.scrollStart(e);
      /* canvaLineA.showToolTip(e, {
								format: function(item, category) {
									return category + '月龄' + item.name + '：' + item.data
								}
							}); */
    },
    moveLineA(e) {
      canvaLineA.scroll(e);
    },
    touchEndLineA(e) {
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          if (category == "出生") {
            //console.log()
            return category + item.name + "：" + item.data;
          } else {
            return category + "月龄" + item.name + "：" + item.data;
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
}

.btd {
  position: fixed;
  width: 100%;
  height: 100rpx;
  top: 1000rpx;
  font-size: 22rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  span {
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin: 10rpx;
  }

  .first {
    background-color: #18c7e1;
  }

  .second {
    background-color: #ff557f;
  }
}

.bt1 {
  top: 1050rpx;
  z-index: 11;

  .quit {
    margin-left: 20rpx;
    color: #007aff;
  }
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding-top: 1upx;
}

.item {
  margin: 20upx;
  padding: 30upx;
  background-color: #fff;
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
}

.qiun-charts {
  position: relative;
  height: 500upx;
}

.tips {
  position: absolute;
  right: 8rpx;
  color: #c9c9c9;
  font-size: 13px;
  bottom: -484rpx;
}

.t1 {
  top: 40rpx;
  right: 100rpx;
}

.t2 {
  top: 100rpx;
  right: 100rpx;
}

.t3 {
  top: 170rpx;
  right: 100rpx;
}

.t4 {
  top: 218rpx;
  right: 100rpx;
}

.t5 {
  top: 256rpx;
  right: 100rpx;
}

.charts {
  height: 1200upx;
}

.qiun {
  // padding-top: 40rpx;
  background-color: #ffffff;
  overflow: scroll;

  .sli {
    padding: 20rpx;

    .le {
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      border-radius: 50%;
      background-color: #18c7e1;
      margin: 0 20rpx 0 5rpx;
    }
  }
}
</style>
